<template>
  <div class="wraps">
    <!-- 侧边栏 -->
    <div class="aside">
      <div class="list">
        <p
          @click="() => toAbout('/navDetails')"
          :class="{ select: active === '/navDetails' }"
        >
          简介
        </p>
        <p
          @click="() => tolatestNews('/navDetails/latestNews')"
          :class="classObject"
        >
          最新消息
        </p>
        <p
          @click="() => tolCommonSense('/navDetails/lcommonSense')"
          :class="{ select: active === '/navDetails/lcommonSense' }"
        >
          小常识
        </p>
        <p
          @click="() => toAdoptMsg('/navDetails/adoptMsg')"
          :class="{ select: active === '/navDetails/adoptMsg' }"
        >
          领养须知
        </p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="contents">
      <router-view> </router-view>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();

const classObject = ref({
  select: false,
});

// 动态类标识
const active = ref(router.currentRoute._value.path);
// 刷新当前页面
const reload = () => {
  active.value = router.currentRoute._value.path;

  router.push({
    name: router.currentRoute._value.name,
  });
};

// 侧边栏动态高亮
const handleChange = () => {
  console.log(active.value);
  if (active.value === "/navDetails/latestNews")
    return (classObject.value.select = true);
  else if (active.value === "/navDetails/latestNews/news")
    return (classObject.value.select = true);
  else return (classObject.value.select = false);
};
handleChange();

reload();
const toAbout = (v) => {
  active.value = v;
  handleChange();
  router.push({ name: "about" });
};
const tolatestNews = (v) => {
  active.value = v;
  handleChange();
  router.push({ name: "latestNews" });
};
const tolCommonSense = (v) => {
  active.value = v;
  handleChange();
  router.push({ name: "lcommonSense" });
};
const toAdoptMsg = (v) => {
  active.value = v;
  handleChange();
  router.push({ name: "adoptMsg" });
};
</script>
<style scoped>
* {
  list-style: none;
}
* {
  margin: 0;
}

.wraps {
  display: flex;
  flex-flow: row nowrap;
  width: 1000px;
  border-bottom: 1px dotted #ccc7c2;

  .aside {
    width: 200px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    .list {
      width: 100%;
      p {
        color: #ffeae3;
        font-size: 16px;
        left: 30px;
        width: 100%;
        height: 68px;
        line-height: 68px;
        text-align: center;
        background: #63534d;
        border-left: 3px solid #63534d;
        cursor: default;
      }

      .select {
        color: #423834;
        background: #fcf7f2;
        border-left-color: #f58220;
      }
    }
  }
  .contents {
    width: 800px;
    display: flex;
    flex-flow: column nowrap;
    background: #fff;
  }
}
</style>
